<!--suppress ALL-->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="utf-8">
        <title>layuiAdmin 网站用户</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport"
              content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all">
        <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all">
    </head>
    <body>
        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">菜单名:</label>
                    <div class="layui-input-block">
                        <input type="text" name="menuName" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn layuiadmin-btn-useradmin" data-type="reload" lay-submit
                            lay-filter="LAY-user-front-search">
                        <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                    </button>
                </div>
            </div>
        </div>
        <div class="layui-fluid">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div style="padding-bottom: 10px;">
                        <button class="layui-btn layuiadmin-btn-useradmin" data-type="batchdel">删除</button>
                        <button class="layui-btn layuiadmin-btn-useradmin" data-type="add">添加</button>
                    </div>
                    <table id="LAY-menu-manage" lay-filter="LAY-menu-manage"></table>
                </div>
            </div>
        </div>
        <!-- 表格操作按钮集 -->
        <script type="text/html" id="barOption">
            <a class="layui-btn layui-btn-mini" lay-event="detail">查看</a>
            <a class="layui-btn layui-btn-mini layui-btn-normal" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-mini layui-btn-danger" lay-event="del">删除</a>
        </script>

        <script src="/layuiadmin/layui/layui.js"></script>
        <script th:inline="none">

            layui.config({
                base: '/layuiadmin/' //静态资源所在路径
            }).extend({
                index: 'lib/index' //主入口模块
            }).use(['index', 'useradmin', 'table'], function () {
                var $ = layui.$
                    , form = layui.form
                    , table = layui.table;

                table.render({
                    elem: '#LAY-menu-manage'
                    , url: '/menulist'
                    , toolbar: '#toolbarDemo'
                    , title: '用户数据表'
                    , totalRow: true
                    , cellMinWidth: 80
                    , cols: [[
                        {type: 'checkbox'},
                        {field: 'id', title: 'ID', sort: true}
                        , {field: 'menuName', title: '菜单名'} //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
                        , {field: 'parentId', title: '菜单父类ID\n', align: 'center'} //单元格内容水平居中
                        , {field: 'url', title: '菜单地址', align: 'center'} //单元格内容水平居中
                        , {fixed: 'right', align: 'center', toolbar: '#barOption'}
                    ]]
                    , page: true

                });


                //添加 删除 查询 点击方法
                $('.layui-btn.layuiadmin-btn-useradmin').on('click', function () {
                    var type = $(this).data('type');
                    active[type] ? active[type].call(this) : '';
                });

                //搜索功能

                //监听修改
                table.on('tool(LAY-menu-manage)', function (obj) {
                    var data = obj.data;
                    if (obj.event === 'edit') {
                        layer.open({
                            //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                            type: 2,
                            title: "修改用户",
                            content: '/toUpdateMenu?id=' + data.id,
                            maxmin: true,
                            area: ['500px', '450px']
                            //引用的弹出层的页面层的方式加载修改界面表单
                        });
                        $("#username").val(data.username);
                        $("#password").val(data.password);
                        //动态向表传递赋值可以参看文章进行修改界面的更新前数据的显示，当然也是异步请求的要数据的修改数据的获取
                        setFormValue(obj, data);
                    } else if (obj.event === 'del') {
                        layer.confirm('确定删除吗？', function (index) {
                            $.ajax({
                                url: '/delMenu',
                                type: "post",
                                data: "id=" + data.id,
                                dataType: "JSON",
                                success: function (data) {
                                    if (data.code === 0) {
                                        layer.msg('删除成功');
                                        table.reload('LAY-menu-manage', {});
                                    } else {
                                        layer.msg('删除失败');
                                    }
                                }
                            })
                        })
                    }
                })

                //修改用户方法
                function setFormValue(obj, data) {
                    form.on('submit(demo11)', function (massage) {
                        var username = $("#username").val();
                        var password = $("#password").val();
                        $.ajax({
                            url: '/updateUser',
                            type: "post",
                            data: {id: data.id, username: username, password: password},
                            dataType: "JSON",
                            success: function (msg) {
                                if (msg.code === 200) {
                                    layer.closeAll('loading');
                                    layer.load(2);
                                    layer.msg("修改成功", {icon: 6});
                                    setTimeout(function () {
                                        obj.update({
                                            username: massage.field.newusername,
                                            password: massage.field.newpassword
                                        });//修改成功修改表格数据不进行跳转
                                        layer.closeAll();//关闭所有的弹出层
                                    }, 1000)
                                } else {
                                    layer.msg("修改失败", {icon: 5});
                                }
                            }
                        })
                    })
                }

                //事件
                var active = {
                    //删除功能
                    batchdel: function () {
                        var checkStatus = table.checkStatus('LAY-menu-manage')
                            , checkData = checkStatus.data,
                            deList = [];//得到选中的数据
                        checkData.forEach(function (n, i) {
                            deList.push(n.id);
                        });
                        if (checkData.length === 0) {
                            return layer.msg('请选择数据');
                        }
                        layer.prompt({
                            formType: 1
                            , title: '敏感操作，请验证口令'
                        }, function (value, index) {
                            layer.close(index);
                            layer.confirm('确定删除吗？', function (index) {

                                //执行 Ajax 后重载
                                $.ajax({
                                    url: '/delUser',
                                    type: 'post',
                                    dataType: 'json',
                                    data: "id=" + deList,
                                    success: function (data) {
                                        if (data.code === 0) {
                                            layer.msg('删除成功');
                                            table.reload('LAY-menu-manage', {});
                                        } else {
                                            layer.msg('删除失败');
                                        }
                                    },
                                    'error': function () {
                                        layer.msg('系统错误');
                                    }
                                })
                                table.reload('user-manage');
                                layer.msg('已删除');
                            });
                        });
                    }
                    //添加跳转
                    , add: function () {
                        layer.open({
                            type: 2
                            , title: '添加菜单'
                            , content: '/toAddMenu'
                            , maxmin: true
                            , area: ['500px', '450px']
                            , yes: function (index, layero) {
                                var iframeWindow = window['layui-layer-iframe' + index]
                                    , submitID = 'LAY-user-front-submit'
                                    , submit = layero.find('iframe').contents().find('#' + submitID);

                                //监听提交
                                iframeWindow.layui.form.on('submit(' + submitID + ')', function (data) {
                                    var field = data.field; //获取提交的字段

                                    //提交 Ajax 成功后，静态更新表格中的数据
                                    //$.ajax({});
                                    table.reload('LAY-user-front-submit'); //数据刷新
                                    layer.close(index); //关闭弹层
                                });

                                submit.trigger('click');
                            }
                        });
                    }
                    //搜索功能
                    , reload: function () {
                        form.on('submit(LAY-user-front-search)', function (data) {
                            var field = data.field;
                            //执行重载
                            table.reload('LAY-menu-manage', {
                                where: {
                                    menuName: field.menuName
                                }
                            });
                        });
                    }
                };
            });
        </script>
    </body>
</html>


